<template>
	<div class="data-list">
		<curr-app :left="245"></curr-app>
		<list-title :data="header"></list-title>
		<list-table :list="dynamicDataList" :tableLoading="tableLoading" :footer="true" :sort="true" @setSort="setSort" :pagination="pagination" :appid="$route.query.appid">
			<template v-slot:data>
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="name" label="名称"></el-table-column>
				<el-table-column label="必须会员">
					<template slot-scope="scope">
						<span :class="'el-icon-' + (scope.row.is_member?'check':'close')"></span>
					</template>
				</el-table-column>
				<el-table-column prop="max_times" label="最多提交次数"></el-table-column>
				<el-table-column prop="data_count" label="数据量"></el-table-column>
				<el-table-column label="启用状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.display" @change="changeDisplay(scope.$index, scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="contentList(scope.$index, scope.row)" v-if="auth.data">数据列表</el-button>
						<el-button type='text' size="mini" @click="attrSetEdit(scope.$index, scope.row)" v-if="auth.attr">字段设置</el-button>
						<el-button type='text' size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="auth.editor">编辑</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]" v-if="auth.delete">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								删除 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeToBool, getSortData, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'
import CurrApp from "pc/common/CurrApp"

export default {
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '自定义表单',
				reload: true,
				buttons: [
					{
						title: '添加自定义表单',
						type: 'primary',
						pathName: 'pc/cms/instance/dynamicData/DynamicData',
						auth: false,
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			auth: {
				data: false,//数据列表
				attr: false,//字段设置
				editor: false,//编辑
				delete: false,//删除
				sort: false,//排序
			},
			/*列表数据*/
			dynamicDataList: [
				{
					id: 1,
					name: '',
					is_member: false,
					max_times: 0,
					data_count: 0,
					display: false,
				},
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: [],
		};
	},
	components: {
		ListTitle,
		ListTable,
		CurrApp
	},
	created: function() {
		/*获取列表数据*/
		this.getDynamicDataList()
		/*权限判断显示*/
		this.header.buttons[0].auth = (judgeAuth('addDynamicData', this.allMenuList) == undefined)?false:true
		this.auth.data = (judgeAuth('dynamicDataList', this.allMenuList) == undefined)?false:true
		this.auth.attr = (judgeAuth('dynamicDataAttrList', this.allMenuList) == undefined)?false:true
		this.auth.editor = (judgeAuth('modifyDynamicData', this.allMenuList) == undefined)?false:true
		this.auth.delete = (judgeAuth('deleteDynamicData', this.allMenuList) == undefined)?false:true
		this.auth.sort = (judgeAuth('dynamicDataSort', this.allMenuList) == undefined)?false:true
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getDynamicDataList()
		}
	},
	methods: {
		/*取出列表数据*/
		getDynamicDataList: function(){
			if(this.$api.dynamicDataList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.dynamicDataList, this.$route.query).then(res => {
					// console.log(res.data.data.list);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.dynamicDataList = []
							Object.keys(res.data.data.list).forEach((k) => {
								this.dynamicDataList.push ({
									id: res.data.data.list[k].dynamic_id,
									name: res.data.data.list[k].name,
									is_member: changeToBool(res.data.data.list[k].is_member),
									max_times: res.data.data.list[k].max_times,
									data_count: res.data.data.list[k].data_count,
									display: changeToBool(res.data.data.list[k].display)
								});
							})
							this.pagination = res.data.data.pageInfo
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*字段编辑*/
		attrSetEdit(index, row) {
			// console.log(row)
			this.$router.push(
				{
					name: 'pc/cms/instance/dynamicData/DynamicDataAttrList', 
					query: {
						appid: this.$route.query.appid,
						id: row.id
					}
				}
			)
		},
		/*数据列表*/
		contentList(index, row) {
			// console.log(row)
			this.$router.push(
				{
					name: 'pc/cms/instance/dynamicData/DynamicDataContentList', 
					query: {
						appid: this.$route.query.appid,
						id: row.id,
						name: row.name
					}
				}
			)
		},
		/*编辑*/
		handleEdit(index, row) {
			// console.log(row)
			this.$router.push(
				{
					name: 'pc/cms/instance/dynamicData/DynamicData', 
					query: {
						appid: this.$route.query.appid,
						id: row.id
					}
				}
			)
		},
		/*删除*/
		handleDelete(index, row) {
			if(this.$api.deleteDynamicData != undefined){
				if(!this.submitLock[index+1]){
					this.submitLock[index+1] = true//锁住当前的 删除按钮
					this.delTip.splice(index+1, 1, false)//提示消失
					/*请求后台删除*/
					this.$baseURL(this.$domain.cms)
					this.$get(this.$api.deleteDynamicData, {
						appid: this.appid,
						id: row.id
					}).then(res => {
						if(res.data.code == 0){
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'success'
							});
							this.dynamicDataList.splice(index, 1);//删除当前行
						}else{
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'error'
							});
						}
						this.submitLock[index+1] = false//释放当前的 删除按钮
					})
					.catch(err => {})
					.finally(() => {}) 
				}
			}
		},
		/*列表中直接修改 是否显示*/
		changeDisplay(index, row){
			if(this.$api.modifyDynamicData != undefined){
				/*请求后台*/
				this.$baseURL(this.$domain.cms)
				this.$post(this.$api.modifyDynamicData, {
					'appid': this.appid,
					'DynamicData': {
						'id': row.id,
						'display': row.display
					}
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*排序*/
		setSort(newIndex, oldIndex){
			// console.log(newIndex, oldIndex)
			if(this.auth.sort && this.$api.dynamicDataSort != undefined){
				this.dynamicDataList = JSON.parse(JSON.stringify(this.dynamicDataList))
				let oldVal = this.dynamicDataList.splice(oldIndex, 1)[0]
				this.dynamicDataList.splice(newIndex, 0, oldVal)
				// console.log(this.dynamicDataList)
				let sort = getSortData(this.dynamicDataList)

				this.$baseURL(this.$domain.cms)
				this.$post(this.$api.dynamicDataSort, {
					appid: this.appid,
					sort: sort
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}else{
				this.$message({
					showClose: true,
					message: '您没有排序的权限',
					type: 'error'
				});
			}
		}
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
.cell
	>.el-button + .el-button
		margin-left: 0;
</style>